import React from 'react';
import { createForm } from 'rc-form';
import { render } from 'react-dom';
import constants from '../../../common/constants';
import CellItem from './cellItem';
import GoodsGrid from '../home/goodsGrid';
import SelectItem from './selectItem';
import './less/index.less';

const swichViewA = constants.swichViewA;
const swichViewB = constants.swichViewB;
const data = [
    {
        id: 1,
        icon: 'http://192.168.0.131:8091/ecommerce/20171122100346.png',
        name: '360路由器 极速路由器(购买送礼品,买5包邮)360路由器 极速路由器(购买送礼品,买5包邮)',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 2,
        icon: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 3,
        icon: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },{
        id: 4,
        icon: 'http://192.168.0.131:8091/ecommerce/20171122100346.png',
        name: '360路由器 极速路由器(购买送礼品,买5包邮)360路由器 极速路由器(购买送礼品,买5包邮)',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 5,
        icon: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 6,
        icon: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },{
        id: 7,
        icon: 'http://192.168.0.131:8091/ecommerce/20171122100346.png',
        name: '360路由器 极速路由器(购买送礼品,买5包邮)360路由器 极速路由器(购买送礼品,买5包邮)',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 8,
        icon: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 9,
        icon: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },{
        id: 10,
        icon: 'http://192.168.0.131:8091/ecommerce/20171122100346.png',
        name: '360路由器 极速路由器(购买送礼品,买5包邮)360路由器 极速路由器(购买送礼品,买5包邮)',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 11,
        icon: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },
    {
        id: 12,
        icon: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        name: '不是所有的兼职汪都需要风吹日晒',
        price: 666.00,
        sellerNum: 18,
        distributorNum: 6
    },

];


class Mall extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            listView: true
        };
    }
    changeView = (e) => {
        this.setState({
            listView:!this.state.listView
        })
    }
    render(){
        return (
            <div>
                <div style={{position:'relative'}}>
                    <div className="boder-radius searchDiv" >
                        <input type="text"  placeholder="热门路由器" style={{height:'60px'}}/>
                    </div>
                    <div style={{width:'6%',height:'80%',marginLeft:'90%'}}>
                        <img src={this.state.listView ? swichViewA : swichViewB} style={{width:'100%',height:'100%',marginTop:'10px'}} onClick={this.changeView}/>
                    </div>
                </div>
                <SelectItem />
                {this.state.listView ?
                    <div style={{marginTop:'80px'}}>
                        <CellItem data={data}/>
                    </div>
                     :
                    <div style={{marginTop:'80px',marginBottom:'140px'}}>
                        <GoodsGrid columnNum={2} data={data} type={1}/>
                        <div style={{ padding: 10, textAlign: 'center',marginBottom:'90px',marginTop:'10px',color:'#8B8B8B' }}>
                            没有更多了～
                        </div>
                    </div>
                }
            </div>
        )
    }
}
export default Mall;